import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { LargestGrid, MonthStrip, TopEvents, TopLists } from '@/components/history/HistoryViews';
import { Section } from '@/components/ui/primitives';
import { apiGet } from '@/lib/api';
import type { HistorySummary } from '@/lib/types';

export const dynamic = 'force-dynamic';

type Params = Promise<{ year: string }>;

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { year } = await params;
  return { title: `History ${year}`, description: `Global Internet Pressure in ${year}: months, largest events, most affected networks and regions.` };
}

export default async function HistoryYearPage({ params }: { params: Params }) {
  const { year } = await params;
  if (!/^\d{4}$/.test(year)) notFound();
  const s = await apiGet<HistorySummary>(`/api/v1/history/summary?year=${year}`);
  return (
    <div className="pb-8">
      <header className="pt-6 pb-4">
        <p className="label">
          <Link href="/history" className="hover:text-ink">
            History
          </Link>{' '}
          · year
        </p>
        <h1 className="num mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">{year}</h1>
      </header>
      <Section label="Months">
        <MonthStrip months={s.months ?? []} />
      </Section>
      <Section label="Largest events">
        <LargestGrid largest={s.largest} />
      </Section>
      <TopLists s={s} />
      <Section label="Top events">
        <TopEvents events={s.top_events} />
      </Section>
    </div>
  );
}